<template>
  <div class="mask">
    <div class="password">
      <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
    </div>
    <!-- 数字键盘 -->
    <van-number-keyboard
      :show="showKeyboard"
      @input="onInput"
      @delete="onDelete"
      @blur="showKeyboard = false"
      @hide="onHide"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      showKeyboard: true
    };
  },
  methods: {
    onHide() {
      this.$emit("end", false);
    },
    onInput(key) {
      this.value = (this.value + key).slice(0, 6);
      if (this.value.length == 6) {
        this.$emit("end", this.value);
      }
    },
    onDelete() {
      this.value = this.value.slice(0, this.value.length - 1);
    }
  }
};
</script>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  .password {
    position: absolute;
    width: 90%;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>